<template>
  <div class="card-main">
    <div class="card-info">
      <div class="card-info-header">
        <div class="card-info-item" />
        <div class="card-info-item" style="white-space:nowrap">
          压力上限设置值
        </div>
        <div class="card-info-item" style="white-space:nowrap">
          压力下限设置值
        </div>
      </div>
      <div v-for="(item, index) in data" :key="index" class="card-info-content">
        <div class="card-info-item">{{ item.name }}</div>
        <div class="card-info-item"><input v-model.number.lazy="item.upControlLimit" type="number" class="item-input" @change="validInput"></div>
        <div class="card-info-item"><input v-model.number.lazy="item.lowControlLimit" type="number" class="item-input" @change="validInput"></div>
      </div>
    </div>
    <div class="card-button">
      <el-button class="confirm-button" @click="changeMachineInfo">确定</el-button>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    outPressure: {
      type: String,
      default: '7.3'
    },
    system: {
      type: String,
      default: 'hcda'
    }
  },
  data() {
    return {
      eqmInfoList: [{ 'name': '离心#1', 'down': 7.3, 'up': 7.7 },
        { 'name': '离心#2', 'down': 7.25, 'up': 7.65 },
        { 'name': '离心#3', 'down': 7.2, 'up': 7.6 },
        { 'name': '离心#4', 'down': 7.2, 'up': 7.7 }],
      upMax: {
        hcda: 8,
        lcda: 6
      },
      downMin: {
        hcda: 7,
        lcda: 5
      },
      valid: true,
      runFlag: false
    }
  },
  computed: {
    // resultValue() {
    //   return this..load.toFixed(0)
    // }
  },
  watch: {
    data() {
      this.changeMachineInfo()
    }
  },

  methods: {
    changeMachineInfo() {
      if (!this.valid) {
        this.$notify({
          title: '请修改为正确压力范围后再点击',
          type: 'error',
          duration: 2500
        })
        return
      }
      const eqmName = this.data.map(e => {
        return e.name
      })
      if (this.system === 'hcda') {
        this.outPressure = 7.3
      } else {
        this.outPressure = 5.6
      }
      const eqmValue = this.data.map(e => {
        return [e.lowControlLimit, this.outPressure, this.outPressure, this.outPressure, e.upControlLimit]
      })
      const options = this.$parent.$parent.options
      this.$parent.$parent.options = {
        ...options,
        tooltip: {
          trigger: 'axis',
          formatter: (param) => {
            const tip = [param[0].name + ': ',
              '压力下限: ' + param[0].data[1],
              '压力上限: ' + param[0].data[5]
            ].join('<br/>')
            return tip
          }
        },
        series: { ...options.series, markLine: { ...options.series.markLine, data: [{ name: '当前总管出口压力', yAxis: this.outPressure }] }, data: eqmValue },
        xAxis: { ...options.xAxis, data: eqmName },
        yAxis: {
          ...options.yAxis, min: this.downMin[this.system], max: this.upMax[this.system]
        }}
      console.log(this.$parent.$parent.options)
      console.log('子元素eqmlist', this.eqmlist)
    },
    validInput(e) {
      console.log(e)
      const value = e.target.value
      if (value > this.upMax[this.system]) {
        this.$notify({
          title: '所填值不能大于' + this.upMax[this.system],
          type: 'error',
          duration: 2500
        })
        this.valid = false
        e.target.value = this.upMax[this.system]
        return e
      }
      if (value < this.downMin[this.system]) {
        this.$notify({
          title: '所填值不能小于' + this.downMin[this.system],
          type: 'error',
          duration: 2500
        })
        this.valid = false
        e.target.value = this.downMin[this.system]
        return e
      }
      this.valid = true
    }
  }
}
</script>

<style>
::-webkit-input-placeholder {
  color: #6fffe9;
}
:-moz-placeholder {
  color: #6fffe9;
}
::-moz-placeholder {
  color: #6fffe9;
}
:-ms-input-placeholder {
  color: #6fffe9;
}
</style>
<style lang="scss" >
.card-main{
    float: left;
    display: flex;
    width: fit-content;
    margin: 1rem 0;
    flex-flow: column nowrap;
    border: 2px solid #4d5e72;
    background: rgba(6, 72, 119, 0.4);
    margin-left: 3%;
    font-size: 1.2rem ;
}
.card-info{
    display: flex;
    /* border: 1px solid #4d5e72; */
}
.card-info-header{
    display:flex;
    flex-flow: column nowrap;
}
.card-info-container{
  display: flex;
  flex-flow: column;
}
.card-info-content{
    display:flex;
    flex-flow: column nowrap;

}
.item-input{
  background-color: transparent;
  color: #02fffd;
  text-decoration: underline;
  outline: none;
  width: 100%;
  text-align: center;
  border: none;
  box-shadow: none;
  // width: 0;
}

.card-info-item {
    padding: 1rem;
    text-align: center;
    flex: 1;
    border: none;
    border-right: 1px solid #4d5e72;
    border-bottom: 1px solid #4d5e72;
}
.presure-setting{
  display: flex;
}

.card-button{
    display: flex;
    flex-flow: row-reverse nowrap;
    border-right: 1px solid #4d5e72;
}
.confirm-button {
  background-color: #065ab2;
  color: white;
  margin: 1rem 2rem;
  padding: 0;
  height: 3rem;
  line-height: 0;
  width: 15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #00a9fe;
  border-radius: 0%;
}

//去掉type=number时，右边的上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
   -webkit-appearance: none !important;
}
input[type="number"]{
  -moz-appearance:textfield;
}

</style>
